<!-- 新增/修改弹框 -->
<template>
  <!-- 新增/修改弹窗 -->
  <el-dialog
    v-model="dialogDetail.visible"
    :width="screenWidth"
    :fullscreen="mobile === 'mobile'"
    :title="dialogDetail.title"
    draggable
    close-icon="CloseBold"
    :close-delay="200"
    @close="closeDialog(false)"
  >
    <el-row v-loading="loading" :gutter="20">
      <el-col :span="auditSpan" :offset="0">
        <el-timeline v-if="auditLog && auditLog.length > 0">
          <el-timeline-item v-for="item in auditLog" :key="item.id" :timestamp="item.createTime" placement="top">
            <el-card style="padding: 5px">
              <div style="font-weight: bold; font-size: 14px">
                {{ item.flowEngineName }}
                &nbsp;
                <el-tag v-if="item.auditStatus !== -1" :type="item.auditStatus === 1 ? '' : 'info'">{{
                  item.auditStatusName
                }}</el-tag>
                &nbsp;
                <el-tag v-if="item.auditIdea !== 0" :type="item.auditIdea === 1 ? 'success' : 'danger'">{{
                  item.auditIdeaName
                }}</el-tag>
              </div>
              <p style="text-indent: 1em; line-height: 10px">{{ item.auditIdeaContent }}</p>
              <p style="text-indent: 1em; line-height: 10px">{{ item.auditTime }}</p>
            </el-card>
          </el-timeline-item>
        </el-timeline>
        <el-empty v-else description="暂未审核记录" />
      </el-col>
      <el-col :span="detailSpan" :offset="2">
        <el-descriptions border title="" :column="2">
          <el-descriptions-item label="项目名称">{{ detailInfo.projectName }}</el-descriptions-item>
          <el-descriptions-item label="项目编号">{{ detailInfo.projectCode }}</el-descriptions-item>
          <el-descriptions-item label="项目负责人">{{ detailInfo.linkMan }}</el-descriptions-item>
          <el-descriptions-item label="责任人联系电话">{{ detailInfo.linkPhone }}</el-descriptions-item>
          <el-descriptions-item label="计划停工日期">{{ detailInfo.planStartDate }}</el-descriptions-item>
          <el-descriptions-item label="计划复工日期">{{ detailInfo.planEndDate }}</el-descriptions-item>
          <el-descriptions-item label="申请理由" :span="2">{{ detailInfo.reason }}</el-descriptions-item>
          <el-descriptions-item label="上传证明材料" :span="2"
            ><div v-for="item in detailInfo.attachments" :key="item.attachmentId" @click="download(item.attachmentId)">
              <!-- <el-link type="primary">primary</el-link> -->
              <el-button type="primary" link>{{ item.attachmentName }}</el-button>
            </div></el-descriptions-item
          >
        </el-descriptions>
        <el-col v-if="dialogDetail.type == 1">
          <el-form ref="auditFormRef" :model="auditFormData" label-width="80" :rules="auditRules">
            <el-form-item label="审核意见" prop="auditIdea" style="margin-bottom: 18px">
              <el-checkbox
                v-model="yesChecked"
                label="通过"
                @change="
                  (value: boolean) => {
                    if (value) {
                      auditFormData.auditIdea = 1;
                      noChecked = false;
                    } else auditFormData.auditIdea = undefined;
                  }
                "
              />
              <el-checkbox
                v-model="noChecked"
                label="不通过"
                @change="
                  (value: boolean) => {
                    if (value) {
                      auditFormData.auditIdea = -1;
                      yesChecked = false;
                    } else auditFormData.auditIdea = undefined;
                  }
                "
              />
            </el-form-item>
            <el-form-item label="" prop="auditIdeaContent" style="margin-bottom: 18px">
              <el-input v-model="auditFormData.auditIdeaContent" type="textarea" :rows="3"></el-input>
            </el-form-item>
          </el-form>
        </el-col>
      </el-col>
    </el-row>
    <template v-if="dialogDetail.type != 0" #footer>
      <div class="dialog_footer">
        <el-button type="primary" :loading="loading" @click="handleSubmit">{{ dialogDetail.footBtn }} </el-button>
        <el-button @click="closeDialog(false)">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { useScreen } from "@/store/modules/screen";
import { GetAuditLogList, GetProjectLockOutForm, AuditProjectLockOut } from "@/api/project/workapply/index";
import { AuditForm } from "@/api/project/workapply/types";
import { FormRules } from "element-plus/es/components/form/src/types";
import { downloadFile } from "@/utils";
import { downloadAttachment } from "@/api/common/other/index";

//声明变量
const screenStore = useScreen();
const mobile = computed(() => screenStore.device);
const screenWidth = ref(1200);
const props = defineProps({
  dialogDetail: {
    type: Object,
    default: () => ({
      visible: false,
      title: "详情",
      footBtn: "详情",
      id: 0,
      type: 0, //0: 详情  1: 审核
    }),
  },
});
const { dialogDetail } = toRefs(props);
const emit = defineEmits(["sendClose"]);
const loading = ref(false);
const auditFormRef = ref();
const detailSpan = ref(24);
const auditSpan = ref(24);
const auditFormData = reactive<AuditForm>({});
const auditRules = reactive<FormRules<AuditForm>>({
  auditIdea: [
    {
      required: true,
      message: "请选择审核意见",
      trigger: "change",
    },
  ],
  auditIdeaContent: [
    {
      required: true,
      message: "请输入审核意见内容",
      trigger: "change",
    },
  ],
});

const yesChecked = ref(false);
const noChecked = ref(false);

//工资信息
const detailInfo = ref({} as any);
//审核日志
const auditLog = ref([] as any[]);

const download = (id: String) => {
  downloadAttachment(id).then((res) => {
    downloadFile(res);
  });
};

function initScreen() {
  if (mobile.value === "mobile") {
    screenWidth.value = screenStore.screenWidth;
  } else {
    screenWidth.value = 1000;
    detailSpan.value = 16;
    auditSpan.value = 6;
  }
}

const initForm = function () {
  if (dialogDetail.value.id) {
    auditFormData.id = dialogDetail.value.id;
    loading.value = true;
    let loadCount = 0;
    //初始化审核日志
    GetAuditLogList(props.dialogDetail.id)
      .then((res) => {
        if (res.type == 0) {
          if (res.success) {
            auditLog.value = res.data;
          } else {
            ElMessage({
              type: "error",
              message: res.msg,
            });
          }
        } else {
          ElMessage({
            type: "error",
            message: res.msg,
          });
        }
      })
      .finally(() => {
        loadCount++;
        loadCount === 2 && (loading.value = false);
      });
    //初始化详情
    GetProjectLockOutForm(dialogDetail.value.id)
      .then((res) => {
        if (res.type == 0) {
          if (res.success) {
            detailInfo.value = res.data;
          } else {
            ElMessage({
              type: "error",
              message: res.msg,
            });
          }
        } else {
          ElMessage({
            type: "error",
            message: res.msg,
          });
        }
      })
      .finally(() => {
        loadCount++;
        loadCount === 2 && (loading.value = false);
      });
  }
};

onMounted(() => {
  initScreen();
  initForm();
});

//提交审核
const handleSubmit = () => {
  if (dialogDetail.value.type == 1) {
    auditFormRef.value.validate((valid: any) => {
      if (valid) {
        loading.value = true;
        AuditProjectLockOut(auditFormData)
          .then((res) => {
            if (res.type == 0) {
              if (res.success) {
                ElMessage({
                  type: "success",
                  message: res.msg,
                });
                closeDialog(true);
              } else {
                ElMessage({
                  type: "error",
                  message: res.msg,
                });
              }
            }
          })
          .finally(() => (loading.value = false));
      }
    });
  }
};

/**
 * 关闭弹窗
 */
function closeDialog(needRefresh: boolean) {
  emit("sendClose", needRefresh);
}
</script>

<style lang="scss" scoped>
:deep(.el-timeline) {
  max-height: 350px;
  overflow: hidden;
  scrollbar-width: none;
}
:deep(.el-timeline:hover) {
  overflow: auto;
}
::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}
:deep(.el-form-item) {
  margin-bottom: 0;
}
:deep(.el-textarea) {
  margin: 0;
}
:deep(.el-button > span) {
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline;
}
</style>
